<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>60秒倒计时</title>
		<style type="text/css">
			body,html{
				height: 96%;
				padding: 6px;
			}
			#frame{
				border: 1px solid #ccc; /*外边框*/
				width: 100%;
				height: 100%;
				margin: 0 auto;	/*外框置中*/
				position: relative; /*相对定位,让小球能在中间绝对定位*/
			}
			#cicle{
				border-radius: 50%;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="frame"></div>
	</body>
	<script src="js/digit.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//------------------共有参数------------------
		//获取元素
		var frameEle = document.getElementById("frame");
		//画布宽和高 （窗口大小）
		var width = frameEle.offsetWidth;
		var height = frameEle.offsetHeight;
		//侦数 每秒刷新次数
		var giant = 24;
		//y方向加速器（类似地球引力照成的重力加速度）
		var gy = 1;
		//小球直径
//		var radius = 16;
		var radius = Math.floor(width/4/15);
		//时间变量
		var eTime = 60;				//倒计时时间
		var endTime = new Date();	//结束时间，起初赋值
		var curTime = new Date();	//当前时间，使用时重新获取
		endTime.setTime(curTime.getTime()+eTime*1000);
		//------------------所有小球组成的数组------------------
		var balls = new Array();
		var sumBall = 0;
		//------------------共有函数------------------
		//随机生成（更换）小球颜色
		function randomCol(eleArc2){
			eleArc2.style.backgroundColor = "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); 
		}
		//将小球eleArc移动到div中moveX，moveY位置
		function moveArc(eleArc,moveX,moveY){
			eleArc.style.left = moveX + "px";
			eleArc.style.top = moveY + "px";
		}
		//数组内元素删除长度减1
		Array.prototype.deleteIndex = function(index){  
		    return this.slice(0, index).concat(this.slice(parseInt(index, 10) + 1));  
		}  
		//------------------创建小球------------------
		//创建并返回 返回小球 对象：包含 元素eleC，位置eleX和eleY，随机速度eleVx和eleVy
		function creArc(positionX,positionY){
			//创建球元素
			var arcImg = document.createElement("div");
			arcImg.id = "cicle";
			frame.appendChild(arcImg);
			//速度 x方向和y方向的速度（随机）
			var vx = Math.floor(Math.random()*10 - 5);
			var vy = Math.floor(Math.random()*12 - 5);
			if (vx == 0) {
				vx++;
			}
			//设置css样式
			arcImg.style.width = radius + "px";
			arcImg.style.height = radius + "px";
			//调用函数设置小球颜色和位置
			randomCol(arcImg);
			moveArc(arcImg,positionX,positionY);
			//定义一个球对象，包含 一个球元素，位置x和y以及速度vx,vy
			var ball = {eleC:arcImg,eleX:positionX,eleY:positionY,eleVx:vx,eleVy:vy};
			
			return ball;
		}
		//------------------初始化一个显示时间的小球组------------------		
		//初始化一个数字显示位置的小球（起初白色）
		function init(timeX,timeY){
			var shis = digit[0];
			//第一个数字左上角位置
			var ballsShi = new Array();
			timeXTem = timeX;
			for (var i = 0; i < shis.length; i++) {
				var shiTem = shis[i];
				ballsShi[i] = new Array();
				for (var j = 0; j < shiTem.length; j++) {
					var creArcTimeTem = creArc(timeX,timeY);
					creArcTimeTem.eleC.style.backgroundColor = "#FFF";
					ballsShi[i][j] = creArcTimeTem;
					timeX += radius; 
				}
				timeX = timeXTem;
				timeY += radius;
			}
			return ballsShi;
		}
		//十位数
		var timeShiX = (width - radius*15)/2;
		var timeShiY = (height - radius*10)/6;
		var ballsS = init(timeShiX,timeShiY);
		//个位数
		timeShiX = (width - radius*15)/2 + radius*8;
		timeShiY = (height - radius*10)/6;
		var ballsG = init(timeShiX,timeShiY);
		//------------------动态显示两位数时间------------------
		function updateTime(endTimeA){
			if (endTimeA<0) {
				return false;
			}
			//旧时间
			var oldShi = Math.floor(eTime/10);
			var oldGe = eTime%10;
			//显示entTime两位数的时间
			var shi = Math.floor(endTimeA/10);
			var ge = endTimeA%10;
			//十位个位填充颜色
			for (var i = 0; i < ballsS.length; i++) {
				for (var j = 0; j < ballsS[i].length; j++) {
					if (oldShi != shi) {
						if (digit[shi][i][j] == 1) {
							ballsS[i][j].eleC.style.backgroundColor = "#BBB";
							//更新数字时候创建随机小球（全部创建数量太多）
//							if ((i+j)%2 == 0) {
								balls[sumBall++] = creArc(ballsS[i][j].eleX,ballsS[i][j].eleY);
//							}
						} else {
							ballsS[i][j].eleC.style.backgroundColor = "#FFF";
						}
					}
					if (oldGe != ge) {
						if (digit[ge][i][j] == 1) {
							ballsG[i][j].eleC.style.backgroundColor = "#BBB";
							//更新数字时候创建随机小球
//							if ((i+j)%2 == 0) {
								balls[sumBall++] = creArc(ballsG[i][j].eleX,ballsG[i][j].eleY);
//							}
						}else {
							ballsG[i][j].eleC.style.backgroundColor = "#FFF";
						}
					}	
				}
			}
			return true;			
		}
		//updateTime(85);
		//------------------定时刷新屏幕------------------
		window.onload = function(){
			var interID = setInterval("updateArc()",1000/giant);
		}
		//------------------运动小球位置更新------------------
		//以每秒giant帧 更新小球位置
		function updateArc(){
			//标记要删除的小球的变量
			var delArc = new Array();
			var sumDel = 0;
			//更新所有小球位置
			for (var i = 0; i < balls.length; i++) {
				var ballTem = balls[i];
								
				ballTem.eleX += ballTem.eleVx;
				ballTem.eleY += ballTem.eleVy;
				if (ballTem.eleVy>=0) {
					ballTem.eleVy += gy;
				} else{
					ballTem.eleVy += gy*3;
				}
				width = frameEle.offsetWidth;
				height = frameEle.offsetHeight;
				//右边
				if (ballTem.eleX+radius>=width-radius/2) {
					//标记删除----标记要删除的小球
					delArc[sumDel++] = i;
				} 
				//下边
				if (ballTem.eleY+radius>=height) {
					ballTem.eleY = height - radius;
					ballTem.eleVy = -Math.abs(ballTem.eleVy);
				}
				//左边
				if (ballTem.eleX<=radius/2) {
					//标记删除----标记要删除的小球
					delArc[sumDel++] = i;
				} 
				//上边
				if (ballTem.eleY<=0) {
					ballTem.eleY = 0;
					ballTem.eleVy = Math.abs(ballTem.eleVy);
				}
				moveArc(ballTem.eleC,ballTem.eleX,ballTem.eleY);
				//标记删除----速度低的删除
				if (Math.abs(ballTem.eleVx) < 0.1 && sumBall > 120) {
					delArc[sumDel++] = i;
				}
				if (Math.abs(ballTem.eleVy) < 0.06 && sumBall > 120) {
					delArc[sumDel++] = i;
				}
			}
			//标记删除----最后只保留*个小球，多余的全部添加到删除小球的数组中
			var totalArc = 200;
			if (balls.length>=totalArc) {
				for (var i = totalArc; i < balls.length; i++) {
					delArc[sumDel++] = i;
				}
			} 
			//删除----小球数量太多,影响显示，删除小球
			delArc.reverse();	// 从后面往前面删除，防止前面删除后后面位置变动
			for (var i = 0; i < delArc.length; i++) {
				var delIndex = delArc[i];
				var ballTem2 = balls[delIndex];
				ballTem2.eleC.remove();
				balls = balls.deleteIndex(delIndex);
				sumBall--;
			}
				
			//更新屏幕小球显示时间
			curTime = new Date();
			endTimeTem = Math.round((endTime.getTime()-curTime.getTime())/1000);
			//如果时间变动，更新时间显示
			if (endTimeTem != eTime) {
				updateTime(endTimeTem);
				eTime = endTimeTem;
			}
			//调试，小球个数
//			console.log(balls.length);
		}
		
	</script>
</html>
